import { Modal, Tree, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import type { DirectoryTreeProps } from 'antd/lib/tree';
import { getSystemMenuTreeData, getMenuTreeByRole } from '@/pages/Dashboard/System/Menu/service';

const RolePermissionModal = ({
  roleId,
  show,
  onCancel,
  onSuccess,
}: {
  children?: React.ReactNode;
  roleId?: string;
  show: boolean;
  onCancel?: () => void;
  onSuccess?: () => void;
}) => {
  const [checkedKeys, setCheckedKeys] = useState<any[]>([]);
  const [treeData, setTreeData] = useState<any[]>([]);

  useEffect(() => {
    getPermissionByRole();
  }, [roleId]);
  useEffect(() => {
    getMenuTreeData();
  }, []);

  // 获取角色所拥有的菜单
  const getPermissionByRole = () => {
    getMenuTreeByRole({ roleId: roleId }).then((res) => {
      setCheckedKeys(res.data);
    });
  };

  // 获取系统菜单
  const getMenuTreeData = () => {
    getSystemMenuTreeData().then((res) => {
      if (res.code == 200) {
        setTreeData(res.data);
      }
    });
  };

  const onCheck: DirectoryTreeProps['onCheck'] = (keys) => {
    setCheckedKeys?.(keys);
  };

  // 请求接口保存
  const handleSubmit = () => {};
  return (
    <Modal
      title={<Space>资源分配</Space>}
      onOk={handleSubmit}
      okText="确认"
      cancelText="取消"
      visible={show}
      centered
      destroyOnClose={true}
      //   footer={false}
      bodyStyle={{ padding: 10 }}
      onCancel={onCancel}
    >
      {treeData.length > 0 && (
        <Tree
          checkable
          defaultExpandAll={true}
          // switcherIcon={<DownOutlined />}
          checkedKeys={checkedKeys}
          treeData={(treeData.length > 0 && treeData) || []}
          onCheck={onCheck}
          multiple={true}
          // defaultCheckedKeys={defaultCheckedKeys}
          fieldNames={{
            title: 'label',
            key: 'value',
          }}
          style={{ width: '100%' }}
        ></Tree>
      )}
    </Modal>
  );
};

export default RolePermissionModal;
